#iol-nav-bar {
    text-align: center;
    color: white;
    font-size: 1em;
}

#iol-nav-bar-title {
    text-transform: uppercase;
    font-family: 'Quicksand', sans-serif;
    font-size: 2.5em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#login-register-wrapper {
    float: right;
    margin-right: 2.5em;
}

#login-register-wrapper button {
    font-size: 1.05em;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin: 0 0.2em;
    /*width: 6em;*/
    color: white;

}

#login-wrapper {
    display: inline-block;
    /*max-width: 8em;*/
    /*margin: 1em;*/
}

#login-wrapper button {
    background: rgb(91, 198, 129);
}

#login {
    /*display: inline-block;*/
    /*float: left;*/
}

.register-button-wrapper {
    display: inline-block;
    /*max-width: 8em;*/
    /*margin: 1em;*/
}

.fp-signup-btn {
    background: rgb(63, 197, 255);
    min-width:6em;
}

.fp-signup-btn:hover {
    background: #6dcff9 !important;
}

.login-register-wrapper button:hover {
    opacity: 0.9;
}
#login-block {
    position: absolute;
    padding: 1em;
    margin-top: 0.75em;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    background: #fff;
    right: 2.75em
}

#login-block .form-group{
    margin-bottom: 0;
}

#login-block input {
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#login-block input:focus {
    outline:0;
    -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(102, 175, 233, 0.71);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(102, 175, 233, 0.7)
}

#reset-password-link {
    display: table;
    text-align: right;
    margin-left: 9.5em;
}

#login-submit {
    font-size: 1em !important;
    background: rgb(91, 198, 129) !important;
    margin: 0 0.5em !important;
    float: left;
}

#course-name-wrapper {
    display: block;
   /* z-index: -1;*/
    position: relative;
}

#course-name-button {  cursor: pointer; }
#course-name-button:hover {
    color: #fff2a1;
}

#course-arrow {
    padding-left: 0.5em;
    color: #f2f2f2;
    font-size: 1.5em;
    vertical-align: top;
    margin-top: 14px;
}

.user-button {
    border: none;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.flag-div {
/*    position: absolute;
    right: 21.5em;*/
    display: inline-block;
    float: left;
    margin-right: 1em;
}


/***********/
/*OLD BELOW*/
/***********/
.navbar {
    font-family: 'Questrial', sans-serif;
    border-style: none;
    margin-bottom: 15px;
    z-index: 50;
    border-radius: 0;
}

/*.navbar-default {*/
    /*background: rgba(47, 41, 41, 0.9);*/
    /*box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
/*}*/

/*.navbar-default .navbar-collapse,*/
/*.navbar-default .navbar-form {*/
    /*border-style: none;*/
/*}*/

/*.navbar > .container .navbar-brand {*/
    /*margin-left: 0;*/
/*}*/

#navlogo {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 2em;
    /*text-align: center;*/
    /*width: 100%;*/
}

#navlogo:hover {
    color: #babfb6;
}

#navnew {
    font-size: 10px;
    padding-left: 5px;
    padding-right: 0;
}

#navnew:hover {
    color: #babfb6;
}

/*.navbar-default .navbar-brand {*/
    /*color: white;*/
/*}*/

/*.navbar-form {*/
    /*margin: 0;*/
    /*padding: 0;*/
    /*!*height: 0; Removes a single line of pixels from the height of the navbar in chrome*!*/
/*}*/

/*.navbar-form .form-group {*/
    /*height: 3em;*/
    /*margin-top:4px;*/
/*}*/

.login-form {
    border: 0 solid;
    margin-bottom: 0;

}

#nav-login-email {
    color: black;
    background: rgba(255, 255, 255, 0.95);
    height: 100%;
    width: 15em;
    font-size: 16px;
    padding: 0.5em;
    margin: 0.5em 0 0;
}

#nav-login-password {
    color: black;
    background: rgba(255, 255, 255, 0.95);
    height: 100%;
    width: 15em;
    font-size: 16px;
    padding: 0.5em;
    margin: 0.5em;
}

#nav-login-email:focus, #nav-login-password:focus{
    outline: 0;
}


#remember-login-button {
    /*display: inline-block;*/
    /*text-align: center;*/
    /*width: 9em;*/
}


#remember-login-button .btn {
    /*background: rgba(156, 156, 156, 0.9);*/
    /*color: white;*/
    /*width: 6em;*/
    /*padding: 0.25em;*/
    /*font-size: 19px;*/
    /*letter-spacing: 3px;*/
    /*text-transform: uppercase;*/
    /*border-radius: 1px;*/
    /*margin: 15px 8px 8px;*/
    /*float: left;*/
}

.fp-login-btn{
    font-size: 1.05em;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin: 0 0.5em;
    width: 6em;
    color: white;
    background: rgb(91, 198, 129);
    cursor:pointer;
}

.fp-login-btn:hover, #login-submit:hover {
    opacity: 0.9;
    color:white;
}

#remember-block {
    /*display: inline-block;*/

    /*background: rgb(104, 101, 104);*/
    /*box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);*/
    /*border-bottom-right-radius: 3px;*/
    /*border-bottom-left-radius: 3px;*/
    /*margin-top: 2px;*/
}

#register {
    /*text-align: center;*/
    /*height: 3em;*/
    /*width: 9em;*/
    /*margin-top:4px;*/
    /*display: inline-block;*/
}

#register .btn {
    /*background: rgba(222, 63, 63, 0.9);*/
    /*color: white;*/
    /*width: 100%;*/
    /*padding: 0.35em ;*/
    /*font-size: 19px;*/
    /*letter-spacing: 3px;*/
    /*text-transform: uppercase;*/
    /*border-radius: 0;*/
}

#mobile-remember-block {
    display: none;
    float: right;
    height: 4.5em;
    width: 40%;
    background: gray;
    text-align: center;
    padding-top: 0.9em;
}

#mobile-remember-block label {
    font-size: 20px;
    float: left;
    width: 60%;
    padding-left: 1em;
    padding-right: 1em;
}

#mobile-remember-block input {
    display: inline;
    float: right;
    transform: scale(2.0);
    margin: 0.8em 1.6em 0.8em 0em;
}

.navbar-form .checkbox {
    color: white;
    bottom: 5px;
    padding-right: 4px;
    font-size: 13px;
    font-weight: 400;
    display: inline-block;
}

#navfiller {
    height: 3.6em;
}

/*AUTHORIZED*/
.dropdown-menu {
    width: 12em;
}

.user-container {
    margin: 0 1em;
    padding: 0px 10px;
    display: inline-block;
}

#user {
    font-size: 1.25em;
}

#user-dropdown {
    border-radius: 5px;
    padding:5px;
    margin-top: 0.25em;
}

#user-dropdown a {

    padding: 0.3em 0.5em;
    font-size: 1.15em;
}

#user-dropdown a:hover {
    background-color: rgba(26, 26, 26, 0.2);
}

#user-dropdown .divider {
    background-color: rgb(116, 116, 116);
    margin: 0.2em 0 0.5em;
}

/*#logout {*/
    /*width: 90%;*/
    /*border-radius: 0px;*/
/*}*/


/*TODO Move Shepherd to another CSS file*/
.shepherd-element.shepherd-theme-arrows.shepherd-transparent-text .shepherd-text {
    color: #3b744f;
    font-size: 1.15em;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content {
    width: 400px;
    max-width: 100%; }
.shepherd-element.shepherd-theme-arrows .shepherd-content a {
    color: inherit; }
.shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {
    background: #55a892;  }
.shepherd-content footer {
    background: white;
    min-height: 0;
}
.shepherd-element.shepherd-theme-arrows {
   z-index: 100;
}

.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
    background: #fefefe;
    padding: 0.5em 0.75em 0;
    font-size: 1.5em;
}

.login-error-text {
    color: rgb(236, 0, 0);
    background: white;
    border-radius: 10px;
    margin: 0 0 5px;
    padding: 5px 0px;
    font-size: 15px;
}

@media (max-width: 992px) {
    .container {
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    #login-register-wrapper {
        margin-right: 0.5em;
    }

    #login-block {
        right: 0.8em;
        margin-top: 0.5em;
    }

    /*#navlogo {*/
        /*display:none;*/
    /*}*/

    /*#navlogo-mini {*/
        /*display: inline;*/
    /*}*/


}

@media (max-width: 767px) {

    .login-error-text {
        font-weight: bold;
        font-size: 14px;
    }

    #main-wrapper {
        padding-top: 4em;
    }
    #iol-nav-bar {
        padding: 0.5em 0 ;
    }

    #login-register-wrapper button, .slideout-menu-button, .fp-login-btn {
        font-size: 1.2em !important;
    }

    .fp-login-btn {
        width: 5.5em;
        margin: 0;
        font-size: 1.4em !important;
        padding: 4px 12px;
    }
    .fp-signup-btn {  min-width: 2em; }

    #login-block {
        right: 0.5em;
    }

    #login-register-wrapper button {
        margin: 0 0.2em;

        padding: 6px 11px;
    }


    #login-submit {
        margin: 0 0.75em 0 0 !important;
    }

    #course-name-wrapper {
        display: inline-block;

        margin-left: 0;
    }

    /*OLD BELOW*/

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }


    #nav-login-email {
        width: 100%;
        margin: 0;
    }

    #nav-login-password {
        width: 100%;
        margin: 0.5em 0;
    }
    
    #remember-login-button {
        width: 100%;
        text-align: left;
    }

    /*.fp-login-btn {*/
        /*display: none;*/
    /*}*/

    #remember-block {
       /* display: none;*/
        background:none;
        box-shadow: none;
    }

    #mobile-remember-block {
       /* display: block;*/
    }

    /*#admin-home {*/
        /*float:right;*/
        /*padding-right: 5px;*/
    /*}*/


    #user-dropdown {
        margin-top: 1px;
        position: relative;
        float: right;
    }

    #register {
        margin: 11px 8px;
    }

    #slideout-menu #command {
        position: absolute;
        margin: 0;
        top: 0.5em;
        right: 0.5em;
        padding: 0;
        text-align: right;
    }
    #command .dropdown {
        position: initial;
        width: 13em;
    }
    .flag-div {  margin-left: 1em; }
    .dropdown-menu { font-size: 1em; }

    #logo-mini {
        text-align: left !important;
        margin: 0.5em 0.5em 1em !important;
        width: 4em !important;
    }
}


@media (max-width: 425px) {
    #course-arrow {
        font-size: 1.25em;
    }
}

@media (max-width: 375px) {
    #course-arrow {
        font-size: 1em;
    }
}

@keyframes fadeinout {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}